
<template>
  <!--这里是入库管理页面-->
  <div>
    <!-- 第一行 -->
    <el-row>
      <el-col :span="2.5">
        <el-button icon="el-icon-menu">
          黄金品类
        </el-button>
      </el-col>
      <el-col :span="2.5">
        <el-button icon="el-icon-plus">

          <router-link :to="{path:'/addStockIn'}">
            新增入库单
          </router-link>

        </el-button>
      </el-col>
      <el-col :span="2.5">
        <el-button icon="el-icon-printer">
          导出
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-date-picker v-model="date"
                        @blur="searchDate"
                        type="daterange"
                        format="yyyy-MM-dd"
                        value-format="timestamp"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </el-col>
      <el-col :span="1">
        <div> &nbsp;</div>
      </el-col>
      <el-col :span="4">
        <el-input v-model="input"
                  placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary"
                   @click="search"
                   icon="el-icon-search">搜索
        </el-button>

      </el-col>
      <el-col :span="3">
        <el-button :circle="true"
                   icon="el-icon-delete-solid"></el-button>
        <el-button :circle="true"
                   icon="el-icon-refresh" @click="refresh()"></el-button>

      </el-col>
    </el-row>

    <!-- 表格 -->

    <el-table :data="tableData"
              style="width: 100%">
        
      <el-table-column label="序号"
                       align="center"
                       width="50">
        <template slot-scope="scope">
          <span>
            {{ scope.$index + 1 }}
          </span>
        </template>
      </el-table-column>

      
      <el-table-column prop="ioOrderNo"
                       align="center"
                       label="单号"
                       width="180">
        
      </el-table-column>
      

      <el-table-column prop="customer"
                       align="center"
                       label="客户"
                       width="100">
      </el-table-column>
      <el-table-column prop="ioOrderType"
                       align="center"
                       label="类型"
                       width="100">
      </el-table-column>
      <el-table-column prop="area"
                       align="center"
                       label="区域"
                       width="80">
      </el-table-column>
      <el-table-column prop="status"
                       align="center"
                       label="状态"
                       width="80">
       <template slot-scope="scope">
          <span v-if="scope.row.status == 1 ">
            未开始
          </span>
          <span v-if="scope.row.status == 2 ">
            待审批
          </span>
          <span v-if="scope.row.status == 3 ">
            失败
          </span>
          <span v-if="scope.row.status == 4 ">
            成功
          </span>
          
        </template>

      </el-table-column>                
      
      <el-table-column prop="condition"
                       align="center"
                       label="成色"
                       width="80">
      </el-table-column>
      <el-table-column prop="weight"
                       align="center"
                       label="重量(g)"
                       width="80">
      </el-table-column>
      <el-table-column prop="amount"
                       align="center"
                       label="数量"
                       width="100">
      </el-table-column>
      <el-table-column prop="perGram"
                       align="center"
                       label="克工费"
                       width="170">
      </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
   <template slot-scope="scope">

        <router-link :to="{path:'/StockInDetail/'+scope.row.ioOrderNo}">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['monitor:job:edit']"
          >查看详情</el-button>
           </router-link>
          
        </template>
        
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination style="float:right"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="1"
                   :page-sizes="[10, 20, 30]"
                   :page-size="10"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {getList,searchByDate} from '@/api/warehouse/StockInManager/index'
import {timestampToTime} from '@/utils/index'
export default {
  inject: ['reload'],
  data() {
    return {
      ioOrderNo1:'',
      input: '',
      date: '',
      //需求单列表
      tableData: [],
      //分页
      pageNum: 1,
      pageSize: 10,
      total: null,
      date: ["null", "null"],
      
      ioOrderNo:null,
      
      formdata:{
        beginCreateTime: '',
        endCreateTime: '',
      }
    }
  },
  methods: {

    detail(id) {
      //跳转到需求单详情页面
      this.$router.push({name: 'DemandOrderDetails', query: {id: id}})
    },
   
    //刷新页面
    refresh() {
      this.start()
    },

    //分页
    handleSizeChange(val) {
      this.pageSize = val
      this.start()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.start()
    },
    edit(id) {
      //跳转到编辑需求单页面
      this.$router.push({name: 'editDemandList', query: {id: id}})
    },
    cancel(id) {
      this.$confirm('取消当前此需求单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.axios({
          method: 'put',
          url: this.baseUrl + 'requisitionForm/cancel',
          params: {
            id: id,
          },
        }).then((res) => {
          console.log(res.data.data)
          this.tableData = res.data.data
          this.reload()
          this.$message({
            type: 'success',
            message: '取消成功!',
          })
        })
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    search(){
      //清空
      this.tableData = []
      if (this.input == '') {
        this.$message.error("请输入查询信息")
        return;
      }
      this.start()
    },
    //按照时间范围查找
    searchDate(){
      this.formdata.beginCreateTime=timestampToTime(this.date[0]),
      this.formdata.endCreateTime=timestampToTime(this.date[1]),
      console.log(this.formdata);
        this.tableData = []
        searchByDate(this.formdata,this.pageNum,this.pageSize).then(res => {
        this.tableData = res.data.list
        this.total = res.data.total
        this.loading = false;
      })
    },
    //分页
    start() {
      
      let IoWarehouse={};
      IoWarehouse.ioOrderNo=this.input
      this.loading = true;
     getList(this.pageNum,this.pageSize,IoWarehouse).then(res => {
        console.log(res);
        console.log(res.data.list)
        this.tableData = res.data.list
        this.total = res.data.total
        this.loading = false;
      });
     
     },
  },
  created() {
    
    this.start()
  },
}
</script>

<style scoped>
</style>
